<template>
  <section class="overflow-hidden w-full whitespace-nowrap max-md:max-w-full topContent flex flex-col">
    <IndexTipHeader />

    <div
      class="flex relative z-10 flex-col  mx-auto w-[1440px]  max-md:max-w-full flex-1"
    >
      <!-- <img
        src="/index.jpg"
        alt="Background image"
        class="absolute inset-0 size-full"
      > -->
      <div class="bg-index" />

      <div
        class="flex flex-1 relative flex-wrap gap-5 justify-between self-end mt-[80px] max-w-full w-full max-md:mt-10 pl-[40px] pr-[20px] "
      >
        <div class="flex flex-col self-start mt-3.5 pt-[45px] max-md:max-w-full max-w-[800px] whitespace-pre-line">
          <h2 class="text-4xl font-bold  max-md:max-w-full text-[#004898]">
            {{ $t('homeText.title') }}
          </h2>
          <p class="self-start mt-5 text-2xl font-medium text-[#0064c8]">
            {{ $t('homeText.subtitle') }}
          </p>
        </div>

        <div class="self-center">
          <LoginCard
            :title="$t('homeText.headquarters')"
            icon-src="/index/index1.svg"
            @click="handleHeadquartersLogin"
          />
          <LoginCard
            :title="$t('homeText.overseasUnit')"
            icon-src="/index/index2.svg"
            class="mt-5"
            @click="handleOverseasLogin"
          />
          <LoginCard
            :title="$t('homeText.supplier')"
            icon-src="/index/index3.svg"
            class="mt-5"
            @click="handleSupplierLogin"
          />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import LoginCard from './LoginCard.vue'

const runtimeConfig = useRuntimeConfig()
const { locale } = useI18n()

const setLangCookie = () => {
  const lang = useCookie('language', { domain: runtimeConfig.public.DOMAIN })
  lang.value = locale.value
}

// Login handlers
const handleHeadquartersLogin = () => {
  setLangCookie()
  // console.log(runtimeConfig.public.HTTPS, runtimeConfig.public.HQM_URL)
  window.open(`${runtimeConfig.public.HTTPS}${runtimeConfig.public.HQM_URL}`, '_blank')
  // Add actual login logic here
}

const handleOverseasLogin = () => {
  setLangCookie()
  window.open(`${runtimeConfig.public.HTTPS}${runtimeConfig.public.OPC_URL}`, '_blank')
  // Add actual login logic here
}

const handleSupplierLogin = () => {
  setLangCookie()
  window.open(`${runtimeConfig.public.HTTPS}${runtimeConfig.public.SUP_URL}`, '_blank')
  console.log('Supplier login clicked')
  // Add actual login logic here
}
</script>

<style scoped lang="scss">
.topContent {
  position: relative;
  &::before{
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #FFDDB3;
  }
  &::after{
    content: "";
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
    height: 100%;
    background: #D4D8ED;
  }
}
.bg-index{
  position: absolute;
  inset: 0;
  size: 100%;
  background-image: url('/index.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  &::before{
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(270deg, rgba(255, 221, 179, 0) 0%, #FFDDB3 100%);
  }
  &::after{
    content: "";
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
    height: 100%;
    background: linear-gradient(270deg, #D4D8ED 0%, rgba(212, 216, 237, 0) 100%);

  }
}
</style>
